<template>
	<view>
		<view class="e-p-b-14" v-if="showReply">
			<view class="e-p-t-10 e-p-l-20 e-p-r-20 e-p-b-20">
				<view class="e-p-20 e-m-b-10">
					<text>{{ $t('user.orderGoodsFormTxt1') }}</text>
				</view>
				<view class="e-p-l-20 e-p-r-20 e-p-t-20 e-p-b-30 bg-f9 e-radius-20 overflow-hidd">
					<rich-text :nodes="formJsonValue.replyInfo" v-if="formJsonValue.replyInfo"></rich-text>
					<text v-else>{{ $t('user.orderGoodsFormTxt3') }}</text>
				</view>
			</view>
			<template v-if="replyInfoFile.length">
				<view class="e-p-20 e-m-b-10">
					<text>{{ $t('user.orderGoodsFormTxt2') }}</text>
				</view>
				<view :class="['bg-f9 e-p-30 e-flex', index !== replyInfoFile.length - 1 && 'e-m-b-30']" v-for="(item, index) in replyInfoFile" :key="item.url">
					<view class="e-flex-1 e-line-1">
						<text>{{ item.name }}</text>
					</view>
					<view>
						<text class="c-primary " @tap.stop="downLoadFile($fullLink(item.url), item.name)">
							{{ $t('common.download') }}
						</text>
					</view>
				</view>
			</template>
			<e-line color="#F7F7F7"></e-line>
		</view>
		<view class="e-p-20">
			<goods-layout-form-popup :formJson="formJsonValue?.formJson" :replyInfo="!!formJsonValue?.replyInfo" :subType="0" priceClass="''" disabled :price="price" :number="number"></goods-layout-form-popup>
		</view>
		<view class="e-p-t-10 e-p-l-20 e-p-r-20 e-p-b-20">
			<view class="bg-f9 e-radius-20 overflow-hidd">
				<template v-if="formData?.list1?.length">
					<goodsFormItem :item="item" :key="item.id" v-for="item in formData.list1" />
				</template>
				<template v-if="formData?.list2?.length">
					<fold>
						<goodsFormItem :item="item" :key="item.id" v-for="item in formData.list2" />
					</fold>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { CardFormData } from '@/common/request/api';
import type { LayoutFormModelValueItem } from '@/typings';
import goodsFormItem from './goods-form-item.vue';
import {downLoadFile} from '@/common/utils'

const props = defineProps<{
	formJson: string;
	price: number;
	number: number;
	showReply?: boolean;
}>();

type GoodsFormInfo = {
	replyStatus: 0 | 1;
	replyInfoFile?: string;
	replyInfo?: string;
	formJson: string;
};
const formJsonValue = computed<GoodsFormInfo | undefined>(() => (props.formJson ? JSON.parse(props.formJson) : undefined));
const replyInfoFile = computed<{ name: string; url: string }[]>(() => {
	if (formJsonValue.value?.replyInfoFile) {
		return JSON.parse(formJsonValue.value.replyInfoFile);
	}
	return [];
});
const formData = computed(() => {
	if (formJsonValue.value) {
		const data: CardFormData = JSON.parse(formJsonValue.value.formJson);
		let itemIndex = 0;
		const list = data.form.formOptions
			.map((item) => {
				const answer = data.subFormDto.list.find((items) => items.formOptionsId === item.id);
				let vle = '';
				let fileList: LayoutFormModelValueItem['fileList'] = [];
				if (answer) {
					if (item.type === 3 || item.type === 4 || item.type === 5) {
						let formOptionsInfoId: string | string[] = [];
						if (answer && answer.formOptionsInfoId) {
							if (answer.formOptionsInfoId[0] === '[') {
								// 是json数组，则代表多选题或单选题中选择了‘其它’这个选项，此时这个数组第零位是答案列表，第一位是选择‘其它’这个选项时输入的内容
								const arr: string[] = JSON.parse(answer.formOptionsInfoId);
								formOptionsInfoId = arr[0].split(',');
								answer.vle = arr[1];
							} else {
								formOptionsInfoId = answer.formOptionsInfoId.split(',');
							}
						}
						vle = formOptionsInfoId
							.map((id) => {
								const optionsInfoItem = item.formOptionsInfo.find((items) => `${items.id}` === id);
								return (optionsInfoItem?.infoText || '') + (optionsInfoItem?.vleid === 'other' ? `--${answer.vle}` : '');
							})
							.join(', ');
					} else if (item.type === 6) {
						fileList = JSON.parse(answer.vle || '[]');
					} else {
						vle = answer.vle || '';
					}
				}
				return {
					...item,
					vle,
					fileList,
					itemIndex
				};
			})
			// .filter((item) => item.vle || item.fileList?.length)
			.map((item, index) => {
				return {
					...item,
					itemIndex: index + 1
				};
			});
		return {
			title: data.form.titleText,
			totalPrice: data.subFormDto.totalPrice,
			list1: list.splice(0, 5),
			list2: list
		};
	}
	return undefined;
});
</script>

<style></style>
